<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import BaseEmpty from '~/components/BaseEmpty.vue'
import BaseImage from '~/components/BaseImage.vue'
import arrowRightGreen from '/images/webp/personal/arrow-right-green.webp'
import avatar from '/images/webp/personal/avatar.webp'
import emptyIcon from '/images/webp/personal/empty-img.webp'
import priceNumIcon from '/images/webp/personal/price-num.webp'

// 使用国际化函数
const { t } = useI18n()
const appStore = useAppStore()
const { userInfo } = storeToRefs(appStore)

const casinoStore = useCasinoStore()
const { casinoNav, casinoGameList, currentCasinoNav, firstCasinoNav, sidebarClickTime } = storeToRefs(casinoStore)

definePageMeta({
  layout: 'header-back',
  title: 'my_personal_data'
});
</script>

<template>
  <div class="personal-data-container">
    <!-- 用户信息区域 -->
    <div class="user-info-section">
      <div class="avatar-container">
        <BaseImage :url="avatar" fit="cover" />
      </div>
      <div class="username">{{ userInfo?.username }}</div>
      <div class="user-id">{{ t('user_colon') }}ID：{{ userInfo?.uid }}</div>
    </div>


    <div class="bet-amount-container">
      <!-- 投注总额区域 -->
      <div class="bet-amount-section">
        <div class="bet-amount-title">
          <span class="icon">
            <BaseImage width="14px" style="height: 18px;" :url="priceNumIcon" />
          </span>
          <span>{{ t('total_bet_amount') }}</span>
        </div>
        <div class="more-details">
          <span>{{ t('more_details') }}</span>
          <span class="arrow-icon">
            <BaseImage width="6px" :url="arrowRightGreen" />
          </span>
        </div>
      </div>

      <!-- 金额展示区域 -->
      <div class="amount-display-section">
        <div class="amount">USD {{ userInfo?.deposit_retain }}</div>
      </div>
    </div>


    <!-- 最喜欢的游戏区域 -->
    <div class="favorite-games-section">
      <div class="section-title">{{ t('favorite_three_games') }}</div>
      <BaseEmpty v-if="false" :description="t('no_content')" :icon="emptyIcon" />
      <div v-else class="games-container">
        <template v-for="(item, i) in casinoGameList" :key="i">
          <template v-if="item.cid === '17'" v-for="(item1, i1) in item.nav_games.slice(0,3)" :key="item1.cid">
            <BaseGameItem :game-info="item1" :supplier-info="item1">
            </BaseGameItem>
          </template>
        </template>
      </div>
    </div>

    <!-- 底部加入日期 -->
    <div class="join-date">
      {{ t('join_date') }} 2025/4/4
    </div>
  </div>
</template>

<style lang="scss" scoped>
.personal-data-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #232626;
  padding: 0 16px;
  color: white;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 15px;

  .avatar-container {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #333;
    margin-bottom: 12px;

    :deep(.base-image) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .username {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .user-id {
    font-size: 12px;
    color: #888;
  }
}

.bet-amount-container {
  padding: 0 16px;
  background-color: #323738;
  border-radius: 8px;
}

.bet-amount-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(132, 145, 148, 0.2);

  .bet-amount-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 4px;
    font-weight: 600;

    .icon {
      display: flex;
      align-items: center;
    }
  }

  .more-details {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #24EE89;
    font-weight: 600;
    font-size: 12px;

    .arrow-icon {
      display: flex;
      align-items: center;
    }
  }
}

.amount-display-section {
  background-color: #3A4142;
  border-radius: 8px;
  padding: 19px 0;
  margin: 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .amount {
    font-size: 15px;
    font-weight: bold;
  }
}

.favorite-games-section {
  margin: 10px 0;
  background-color: #323738;
  border-radius: 8px;
  padding: 0 16px;
  padding-bottom: 16px;


  .section-title {
    font-size: 14px;
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid rgba(132, 145, 148, 0.2);
  }

  .games-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    gap: 8px;
    min-height: 278px;
    margin-top: 15px;
  }

  .game-card {
    flex: 1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: 100%;


    .multiplier {
      font-size: 24px;
      font-weight: bold;
      color: yellow;
      background-color: rgba(255, 255, 0, 0.2);
      border-radius: 50%;
      width: 65px;
      height: 65px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
    }

    .game-name {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 6px;
    }

    .game-info {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      width: 100%;

      .game-amount {
        font-size: 9px;
        position: absolute;
        bottom: 6px;
        right: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        padding: 2px 4%;
        gap: 2px;
        background: #00000033;
      }

      .game-logo {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.join-date {
  padding: 16px 0;
  text-align: center;
  color: #B3BEC1;
  font-size: 11px;
}
</style>
